<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">

window.onload = function()
{
	var doc = window.frames[ 'xEditorArea' ].document ;

	doc.open() ;

	doc.write( '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' ) ;

	doc.write( '<html>' ) ;
	doc.write( '<head><title></title>' ) ;
	doc.write( '</head><body>' ) ;
	doc.write( '<div style="height:300px; background-color:yellow"></div>' ) ;
	doc.write( '<div id="xRed" style="height:100px; background-color:red"></div>' ) ;
	doc.write( '<div style="height:100px; background-color:blue"></div>' ) ;
	doc.write( '</body></html>' ) ;

	doc.close() ;
}

function DoScroll()
{
	var div = window.frames[ 'xEditorArea' ].document.getElementById( 'xRed' ) ;
	div.scrollIntoView( false ) ;
}

    </script>
</head>
<body>
	<p>Reduced TC for <a href="http://dev.fckeditor.net/ticket/1462">#1462</a>.</p>
	<p>Scroll down the page until the IFRAME and the button are visible.</p>
	<hr />
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<iframe id="xEditorArea" name="xEditorArea" src="about:blank" width="100%" height="200" style="border: #000000 1px solid;">
	</iframe>
	<p>
		The above IFRAME constains a yellow and a red DIV elements. By clicking the
		following button, only the IFRAME should scroll to show the red DIV,
		while the main window should stay at the same position.
	</p>
	<p>
		<input type="button" value="Call xRed.scrollIntoView(false)" onclick="DoScroll();" />
	</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
	<p>Some text.</p>
</body>
</html>
